<template>
  <div style="width: 100%;" class="mt24">
    <t-form :data="formData" :rules="rules" ref="form" layout="inline" label-align="top">
      <t-form-item label="详情" name="params_data" style="width: 100%;margin-right: 0;">
          <div style="width: 100%;">
            <t-table
              rowKey="index"
              class="table-class mt24"
              :data="formData.params_data"
              :columns="columns"
              :stripe="stripe"
              :bordered="bordered"
              :hover="hover"
              :size="size"
              :table-layout="tableLayout ? 'auto' : 'fixed'"
              :showHeader="showHeader"
              cellEmptyContent="-"
              resizable
            >
              <template #title-slot-index></template>
              <template #title-slot-option></template>
              <template #index="{col, colIndex, record, row, rowIndex }">
                <p>{{ rowIndex + 1 }}</p>
              </template>
              <template #title="{col, colIndex, record, row, rowIndex }">
                <div>
                  <h3 class="item-title">{{ row.title }}</h3>
                  <!--<p class="item-sn">SN码：{{ row.sn }}</p>-->
                </div>
              </template>
              <template #option="{col, colIndex, record, row, rowIndex }">
                <t-space size="12px">
                  <t-button theme="danger" variant="outline" @click="handleDelete(row)">删除</t-button>
                  <!--<t-link theme="danger" class="opt-btn" variant="outline" @click="handleDelete(row)">删除</t-link>-->
                </t-space>
              </template>
            </t-table>
            <div v-if="showAddForm" class="add-form">
              <t-form :data="params_data" :rules="rules" ref="addForm" layout="inline" label-align="top" @submit="onSubmit">
                <t-form-item name="title" style="width: 372px; flex: 1; margin-right: 16px;">
                  <t-input v-model="params_data.title" placeholder="输入配件名称" />
                </t-form-item>
                <t-form-item name="num" style="width: 110px;margin-right: 16px;">
                  <t-input v-model="params_data.num" theme="column" style="width: 100%;" placeholder="输入数量" />
                </t-form-item>
                <!--<t-form-item name="price" style="width: 96px;margin-right: 0;">-->
                <!--  <t-input v-model="params_data.price" theme="column" style="width: 100%;" placeholder="¥0.00" />-->
                <!--</t-form-item>-->
                <!--<t-form-item name="unit" style="width: 200px;margin-right: 16px;">-->
                <!--  <t-input v-model="params_data.unit" theme="column" style="width: 100%;" placeholder="输入单位" />-->
                <!--</t-form-item>-->
                <!--<t-form-item name="sn" style="flex: 1;margin-right: 0;">-->
                <!--  <t-input v-model="params_data.sn" theme="column" style="width: 100%;" placeholder="输入SN码" />-->
                <!--</t-form-item>-->
                <!--<t-form-item name="remark" style="width: 100%;margin-right: 0">-->
                <!--  <t-input v-model="params_data.remark" theme="column" style="width: 100%;" placeholder="输入备注" />-->
                <!--</t-form-item>-->
                <t-form-item name="remark" style="width: 100%;margin-right: 0">
                  <t-space size="12px">
                    <t-button theme="primary" class="confirm-btn" @click="handleSubmit">保存</t-button>
                    <t-button theme="default" variant="outline" class="cancel-btn" @click="showAddForm = false">取消</t-button>
                  </t-space>
                </t-form-item>
              </t-form>
            </div>

            <div v-if="!showAddForm" class="pt20" @click="handleAdd">
              <t-button theme="default" variant="outline" class="add-btn">
                <p class="flex align-center">
                  <icon-font name="add-circle" class="mr8" />
                  新增一条
                </p>
              </t-button>
            </div>
          </div>
      </t-form-item>
    </t-form>
  </div>
</template>

<script>
import { IconFont } from "tdesign-icons-vue";

export default {
  name: 'ProductInventory',
  components: { IconFont },
  props: {
    value: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      editorOption: {},
      params_data: {
        title: '',  // 名称
        num: 1,  // 数量
        //sn: '', // 编号
        //unit: '', // 单位
        //price: '',  // 单价
        //remark: '', // 备注
      },
      formData: {
        params_data: [
          //{
          //  title: 'DJI Avata 2 智能飞行电池',
          //  num: '13',
          //  //sn: 'JDKJKJ824348292',
          //  //unit: '个',
          //  //price: '¥83992',
          //  //remark: 'drone'
          //},
          //{
          //  title: 'DJI Avata 2 智能飞行电池',
          //  num: '13',
          //  //sn: 'JDKJKJ824348292',
          //  //unit: '个',
          //  //price: '¥83992',
          //  //remark: 'drone'
          //},
        ],  // 清单
      },
      rules: {
        //sn: [{required: true, message: '请输入编号', trigger: 'blur'},],
        title: [{required: true, message: '请输入名称', trigger: 'blur'},],
        num: [{required: true, message: '请输入数量', trigger: 'blur'},],
      },
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'index', title: 'title-slot-index', width: 44},
        {colKey: 'title', title: '名称', ellipsis: true},
        {colKey: 'num', title: '数量', width: 82},
        //{colKey: 'unit', title: '单位', width: 62},
        //{colKey: 'price', title: '单价', width: 82},
        //{colKey: 'remark', title: '备注', width: 72, ellipsis: true},
        {colKey: 'option', title: 'title-slot-option', fixed: 'right', width: 84},
      ],
      showAddForm: false,
    }
  },
  mounted() {
  },
  methods: {
    reset() {
      this.formData = {
        params_data: [], // 标签
      }
      this.$refs.form.reset()
    },
    submit() {
      return this.$refs.form.validate()
    },
    handleAdd(row) {
      this.showAddForm = true
      //this.formData.params_data.push({
      //  sn: 'JDKJKJ824348292',
      //  title: 'DJI Avata 2 智能飞行电池',
      //  num: '13',
      //  unit: '个',
      //  price: '¥83992',
      //  remark: 'drone'
      //})
    },
    // 保存
    handleSubmit() {
      this.$refs.addForm.submit()
    },
    onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        this.formData.params_data.push(this.params_data)
        this.$nextTick(()=> {
          this.params_data = {
            title: '',  // 名称
            num: 1,  // 数量
            //sn: '', // 编号
            //unit: '', // 单位
            //price: '',  // 单价
            //remark: '', // 备注
          }
        })
      } else {
        this.$message.warning(firstError);
      }
    },
    // 删除
    handleDelete(row) {
      this.formData.params_data = this.formData.params_data.filter(item => item !== row)
    }
  }
}
</script>

<style lang="less" scoped>
//.table-class {
//  td {
//    padding: 0 var(--td-comp-paddingLR-l);
//  }
//}

/deep/ .add-form {
  margin-top: 24px;
  padding: 20px 16px;
  background-color: #F3F3F3;
  border-radius: var(--td-radius-default);

  .t-input, .t-input.t-is-readonly {
    background-color: #FFFFFF;
  }
}

.add-btn {
  width: 140px;
  height: 42px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  border-radius: var(--td-radius-medium);
}

.item-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

.item-sn {
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  color: #000000E5;
}

.confirm-btn {
  width: 80px;
  height: 42px;
  font-size: 16px;
  color: #FFFFFFE5;
}

.cancel-btn {
  width: 80px;
  height: 42px;
  font-size: 16px;
}
</style>
